// Vue的插件机制
// 这个模块需要导出一个对象或者函数，如果导出的是一个对象，需要提供instal1
// 这个注册全局组件的模块
// 提示:  去 global.d.ts 注册一下类型
//        使用全局组件的时候需要和组件名称要一致
import gujiaping from '@/components/gujiaping/index.vue'
import lunbotu from '@/components/lunbotu/index.vue'
import gengduo from '@/components/gengduo/index.vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/qrcode.jpg'
export default {
  install(app: any) {
    app.component(gujiaping.name, gujiaping)
    app.component(lunbotu.name, lunbotu)
    app.component(gengduo.name, gengduo)
    // 可以在install函数中注册全局组件，也可以注册全局指令
    app.directive('lazy', {
      // vue2中是inseted配置项,但是在vue3中叫mounted,
      // el:使用v-lazy指令的dom元素
      mounted(el: any, binding: any) {
        // 图片的懒加载逻辑 useIntersectionObserver参数1：回调函数 参数2：可选的配置
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            // 给el元素设置src属性
            el.src = binding.value
            console.log(`图片懒加载`, binding.value)
            stop()
            // 如果图片失败了加载默认图片
            el.onerror = () => {
              el.src = defaultImg
            }
          }
        })
      }
    })
  }
}
